<!-- <template>
 <div class="tabberWarp" >
 <div class="warp">
  <Item :txt='item.txt' :page='item.page' @change='getVal' v-for="(item,index) in tabbarDes" :key='index' :sel='selected'>
  <img :src="item.normalImg" slot='normalImg'>
  <img :src="item.activeImg" slot='activeImg'>
  </Item>
 </div>
 </div>
</template>
<script type="text/javascript">
 import Item from './Item.vue'
 export default{
 components:{
  Item
 },
 data:function(){
  return{
  selected:'',
  tabbarDes:[
   {
   txt:'首页',
   page:'',
   normalImg:require('../static/tabbar/23.png'),
   activeImg:require('../static/tabbar/22.png')
    
   },  
   {
   txt:'素材库',
   page:'pages/material/material',
   normalImg:require('../static/tabbar/24.png'),
   activeImg:require('../static/tabbar/25.png')
   },
   {
   txt:'',
   page:'pages/edit/edit',
   normalImg:require('../static/tabbar/43.png'),
   activeImg:require('../static/tabbar/42.png')
   },
   {
   txt:'学习',
   page:'pages/learn/learn',
   normalImg:require('../static/tabbar/26.png'),
   activeImg:require('../static/tabbar/27.png')
   },
   {
   txt:'我的',
   page:'pages/my/my',
   normalImg:require('../static/tabbar/44.png'),
   activeImg:require('../static/tabbar/45.png')
   },
  
  ]
  }
 },
 methods:{
  getVal:function(res){
  this.selected = res;
  }
 }
 }
</script>
<style type="text/css">
 .warp{
 width: 100%;
 border-top: 1px solid #eee;
 background: #fff;
 display: flex;
 align-items: center;
 justify-content: space-around;
 font-size: 0;
 }
 .warp img{

 }
 .tabberWarp img{
 margin-top: 20rpx;
 margin-bottom: 10rpx;
 }
 .tabberWarp{
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 padding-bottom: 10rpx;
 background: #fff;
 }
</style> -->